<template>
	<view class="page-cont" :style="useTheme.theme">
		<navbar title="能耗"></navbar>
		<scroll-view class="inspection-list" scroll-y>
			<view class="inspection-item" v-for="(item, index) in inspectionList" :key="index">
				<view class="inspection-item-title">
					<text class="inspection-item-title-name">{{item.name1}}</text>
				</view>
				<view class="inspection-item-child" v-for="(childItem, childIndex) in item.childList" :key="childIndex">
					<view class="inspection-item-child-item">

						<view>
							<text class="inspection-item-child-item-status">开启</text>
						</view>

						<text class="inspection-item-child-item-name">{{childItem.name3}}</text>

						<view class="inspection-item-child-item-info">
							<text class="inspection-item-child-item-key">绑定资产：</text>
							<text class="inspection-item-child-item-value">{{childItem.name4}}</text>
						</view>

						<view class="inspection-item-child-item-info">
							<text class="inspection-item-child-item-key">上次巡检时间：</text>
							<text class="inspection-item-child-item-value">{{childItem.name5}}</text>
						</view>

						<view class="inspection-item-child-item-info">
							<text class="inspection-item-child-item-key">下次巡检时间：</text>
							<text class="inspection-item-child-item-value">{{childItem.name6}}</text>
						</view>

					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, computed, onMounted, watch } from 'vue';
	import { useNavbar } from "@/utils/hooks.js"
	import useThemeStore from '@/store/theme';

	const useTheme = useThemeStore();

	const inspectionList = reactive([{
		name1: "机组表面清扫1",
		name2: "12",
		childList: [{
			name3: "压缩机",
			name4: "压缩机-230232311",
			name5: "2024-05-20 23:06:36",
			name6: "2024-05-20 23:06:36"
		}, {
			name3: "压缩机",
			name4: "压缩机-230232311",
			name5: "2024-05-20 23:06:36",
			name6: "2024-05-20 23:06:36"
		}]
	}, {
		name1: "机组表面清扫2",
		name2: "12",
		childList: [{
			name3: "压缩机",
			name4: "压缩机-230232311",
			name5: "2024-05-20 23:06:36",
			name6: "2024-05-20 23:06:36"
		}]
	}, {
		name1: "机组表面清扫3",
		name2: "12",
		childList: [{
			name3: "压缩机",
			name4: "压缩机-230232311",
			name5: "2024-05-20 23:06:36",
			name6: "2024-05-20 23:06:36"
		}]
	}, {
		name1: "机组表面清扫1",
		name2: "12",
		childList: [{
			name3: "压缩机",
			name4: "压缩机-230232311",
			name5: "2024-05-20 23:06:36",
			name6: "2024-05-20 23:06:36"
		}, {
			name3: "压缩机",
			name4: "压缩机-230232311",
			name5: "2024-05-20 23:06:36",
			name6: "2024-05-20 23:06:36"
		}]
	}, {
		name1: "机组表面清扫1",
		name2: "12",
		childList: [{
			name3: "压缩机",
			name4: "压缩机-230232311",
			name5: "2024-05-20 23:06:36",
			name6: "2024-05-20 23:06:36"
		}, {
			name3: "压缩机",
			name4: "压缩机-230232311",
			name5: "2024-05-20 23:06:36",
			name6: "2024-05-20 23:06:36"
		}]
	}]);
</script>

<style lang="scss" scoped>
	.page-cont {
		display: flex;
		flex-direction: column;

		.inspection-list {
			margin-top: 15rpx;
			// padding: 2rpx;
			// background-color: #fff;
			margin-left: 20rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;

			// &:first-child {
			// 	margin-top: 0rpx;
			// }

			// &:last-child {
			// 	margin-bottom: 15rpx;
			// }

			.inspection-item {
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;
				margin-bottom: 15rpx;
				border-radius: 10rpx;
				background-color: #FFFFFF;
				border: 2px solid #FFFFFF;
				box-shadow: 0px 10px 10px 0px rgba(135, 166, 233, 0.1);

				.inspection-item-title {
					display: flex;
					flex-direction: row;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					background-color: #EFF1F7;
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					padding-left: 20rpx;
					padding-right: 20rpx;
					justify-content: space-between;

					.inspection-item-title-name {
						font-size: 25rpx;
						font-weight: 500;
						color: #333333;
					}
				}

				.inspection-item-child {
					padding-left: 15rpx;
					padding-right: 15rpx;
					display: flex;
					flex-direction: column;
					
					&:first-child {
						margin-top: 15rpx;
					}
					
					&:last-child {
						margin-bottom: 15rpx;
					}

					.inspection-item-child-item {
						border-radius: 5rpx;
						display: flex;
						flex-direction: column;
						padding-left: 25rpx;
						padding-right: 25rpx;
						padding-top: 20rpx;
						padding-bottom: 20rpx;
						margin-top: 15rpx;
						background-color: #F7F9FF;

						.inspection-item-child-item-status {
							background-color: $theme-color;
							color: #fff;
							font-size: 23rpx;
							padding-left: 10rpx;
							padding-right: 10rpx;
							padding-top: 3rpx;
							padding-bottom: 3rpx;
						}

						.inspection-item-child-item-name {
							color: #333333;
							font-weight: 600;
							font-size: 25rpx;
						}

						.inspection-item-child-item-info {
							display: flex;
							flex-direction: row;

							.inspection-item-child-item-key {
								color: #999;
								font-weight: 500;
								font-size: 25rpx;
								flex: 1;
							}

							.inspection-item-child-item-value {
								color: #666;
								flex: 2.5;
								font-weight: 500;
								font-size: 25rpx;
							}
						}

					}
				}
			}
		}
	}
</style>